<template>
  <div class="timeout-settings">
    <el-form
      ref="timeoutForm"
      :model="formData"
      label-width="120px"
      class="settings-form"
    >

      <el-form-item label="正常订单超过：">
        <el-input-number
          v-model="formData.normalOrderOvertime"
          :min="1"
          :max="30"
          size="small"
        ></el-input-number>
        <span class="unit">分</span>
        <span class="description">未付款，订单自动关闭</span>
      </el-form-item>

      <el-form-item label="发货超过：">
        <el-input-number
          v-model="formData.confirmOvertime"
          :min="1"
          :max="15"
          size="small"
        ></el-input-number>
        <span class="unit">天</span>
        <span class="description">未收货，订单自动完成</span>
      </el-form-item>

      <el-form-item label="订单完成超过：">
        <el-input-number
          v-model="formData.finishOvertime"
          :min="1"
          :max="15"
          size="small"
        ></el-input-number>
        <span class="unit">天</span>
        <span class="description">自动结束交易，不能申请售后</span>
      </el-form-item>

<!--      <el-form-item label="订单完成超过：">-->
<!--        <el-input-number-->
<!--          v-model="formData.reviewTimeout"-->
<!--          :min="1"-->
<!--          :max="999"-->
<!--          size="small"-->
<!--        ></el-input-number>-->
<!--        <span class="unit">天</span>-->
<!--        <span class="description">自动五星好评</span>-->
<!--      </el-form-item>-->
      <el-form-item>
        <el-button type="primary" @click="handleSubmit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { listSetting, getSetting, delSetting, addSetting, updateSetting } from "@/api/order/setting";
export default {
  name: 'TimeoutSettings',
  data() {
    return {
      formData: {},
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /** 查询订单设置列表 */
    getList() {
      this.loading = true;
      listSetting(this.queryParams).then(response => {
        this.formData = response.rows[0];
      });
    },
    handleSubmit() {
      // 处理表单提交
      this.$confirm('确认要保存这些设置吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        updateSetting(this.formData).then(response => {
          this.$modal.msgSuccess("修改成功");
          this.getList();
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消保存'
        })
      })
    }
  }
}
</script>

<style scoped>
.timeout-settings {
  margin: 0 auto;
  border: 1px solid gainsboro;
  padding: 20px;
  background: #fff;
  border-radius: 4px;
}

.settings-form {
  max-width: 600px;
}
/deep/ .el-form{
  margin: 0 auto;
}

.unit {
  margin-left: 10px;
  color: #606266;
}

.description {
  margin-left: 15px;
  color: #909399;
  font-size: 14px;
}

:deep(.el-input-number) {
  width: 120px;
}

:deep(.el-form-item) {
  margin-bottom: 25px;
}
</style>
